<template>
  <div class="picker">
    <NstdSelect v-model="curTheme" @change="changeTheme">
      <NstdOption
        v-for="item in themeConfigArr"
        :key="item.type"
        :label="item.name"
        :value="item.type"
      />
    </NstdSelect>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const color1 = ref('#409EFF')
import { Theme } from '../../../src/utils/theme.js'

let curTheme = ref('green')
let themeConfigArr = ref([
  {
    type: 'blue',
    name: '科技蓝'
  },
  {
    type: 'dark',
    name: '监视蓝'
  },
  {
    type: 'green',
    name: '国网绿'
  }
])
let themeObj = ref({})

function changeTheme(type) {
  curTheme.value = type || 'green'
  themeObj = Theme[curTheme.value]
  getsTheColorScale()

  // 设置css 变量
  Object.keys(themeObj).map(item => {
    document.documentElement.style.setProperty(item, themeObj[item])
  })
}

// 获取色阶
function getsTheColorScale() {
  const colorList = ['primary', 'success', 'warning', 'danger', 'error', 'info']
  const prefix = '--el-color-'
  colorList.map(colorItem => {
    for (let i = 1; i < 10; i += 1) {
      if (i === 2) {
        // todo 深色变量生成未完成 以基本色设置
        themeObj[`${prefix}${colorItem}-dark-${2}`] = colorMix(themeObj[`${prefix}black`], themeObj[`${prefix}${colorItem}`], 1)
      } else {
        themeObj[`${prefix}${colorItem}-light-${10 - i}`] = colorMix(themeObj[`${prefix}white`], themeObj[`${prefix}${colorItem}`], i * 0.1)
      }
    }
  })
}
function colorMix(color1, color2, weight, red, green, blue) {
  weight = Math.max(Math.min(Number(weight), 1), 0)
  let r1 = parseInt(color1.substring(1, 3), 16)
  let g1 = parseInt(color1.substring(3, 5), 16)
  let b1 = parseInt(color1.substring(5, 7), 16)
  let r2 = parseInt(color2.substring(1, 3), 16)
  let g2 = parseInt(color2.substring(3, 5), 16)
  let b2 = parseInt(color2.substring(5, 7), 16)
  let r = Math.round(r1 * (1 - weight) + r2 * weight)
  let g = Math.round(g1 * (1 - weight) + g2 * weight)
  let b = Math.round(b1 * (1 - weight) + b2 * weight)
  r = ("0" + (r || 0).toString(16)).slice(-2)
  g = ("0" + (g || 0).toString(16)).slice(-2)
  b = ("0" + (b || 0).toString(16)).slice(-2)
  return "#" + r + g + b;
}

</script>

<style lang="scss" scoped>
.picker {
  margin-left: 20px;
}
</style>